<template>
	<view class="content">
		<view class="yj">
			<view class="yj_top">
				<h1>{{text1}}</h1>
				<view class="jy_top_c">
					<p>{{text2}}</p>
				</view>			
			</view>	
			<view class="yj_content">
				<view class="yj_c_top flex">
					<h2>今日指导价</h2>
					<p @click="change(index)">切换视图</p>			
				</view>
				<view class="yj_text">{{time}}</view>
				<view class="yj_contents">
					<ul class="yj_contents_nav" v-if="currentId==0">
						<li class="yj_c_li flex"v-for="(item,index) in contents" :key="index">
							<view class="yj_c_li_left">
								<b>{{item.num1}}</b><text>{{item.text1}}</text>
							</view>
							<view class="yj_c_li_right flex">
								<b>{{item.num2}}</b><text>{{item.text2}}</text><text>{{item.text3}}</text>
							</view>
						</li>
					</ul>
					<!-- 底部区域图 -->
					
					<view v-if="currentId==1">
					  <canvas canvas-id="OTHBVZYLEcSXooykxlygIIPergTSBAlm" id="OTHBVZYLEcSXooykxlygIIPergTSBAlm" class="charts" @touchend="tap"/>
					</view>
				</view>
				
				
			</view>
		</view><!--头部加tab切换-->
		<view class="yj_bottom">
			<view class="yj_b_top flex">
				<h1>{{text3}}</h1>
				<p @click="jumpDetail()">{{text4}}</p>
			</view>
			<view class="yj_bottoms">
				<ul class="bottoms ">
					<li class="flex" v-for="(item,index) in bottoms" :key="index">
						<view class="bottoms_left">
							<image :src="item.src" mode=""></image>
						</view>
						<view class="bottoms_right">
							<!-- <view class="ding">
								距离最近
							</view> -->
							<h1>{{item.title1}}</h1>
							<p>{{item.address}} <text>{{item.kilo}}</text></p>
							<view class="bottoms_right_one">
								<text>{{item.num1}}</text><span>{{item.text2}}</span>
							</view>
							<view class="bottoms_right_two">
								{{item.title2}}<text>{{item.num3}}</text>{{item.title3}}
							</view>
						</view>
					</li>
				</ul>
			</view>
		</view>
		<view class="yj_fixed flex">
			<view class="yj_fixed_left">
				分享
			</view>
			<view class="yj_fixed_right">
				订阅提醒
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
	var uChartsInstance = {};
	export default{
		data(){
			return{
				cWidth: 750,
				cHeight: 400,
				text1:'油价变动随时掌握',
				text2:'订阅提醒，加油少花钱',
				text3:'附近好战',
				text4:'更多油站',
				isActive:0,
				index:0,
				currentId:'',
				time:'调价日：预计2022年10月25日',
				contents:[
					{id:'1',num1:'92#',text1:'汽油',num2:'￥8.17/L',text2:'价格持平',text3:'-'},
					{id:'2',num1:'95#',text1:'汽油',num2:'￥8.77/L',text2:'价格持平',text3:'-'},
					{id:'3',num1:'0#',text1:'柴油',num2:'￥7.86/L',text2:'价格持平',text3:'-'}
				],
				bottoms:[
					{id:'1',src:'/static/images/youjia (1).gif',title1:'泰安服务区东区加油站',
					address:'山东省泰安市岱岳区太平街道.',kilo:'3.24km',num1:'￥7.67/L',text2:'油站价￥8.17/L',
					title2:'完蛋返加油金',num3:'0.50',title3:'/升'},
					{id:'2',src:'/static/images/youjia (2).gif',title1:'大地能源集团天平加油站',
					address:'山东省泰安市岱岳区太平街道.',kilo:'3.24km',num1:'￥7.67/L',text2:'油站价￥8.17/L',
					title2:'完蛋返加油金',num3:'0.50',title3:'/升'},
					{id:'3',src:'/static/images/youjia (3).gif',title1:'泰安服务区东区加油站',
					address:'山东省泰安市岱岳区太平街道.',kilo:'3.24km',num1:'￥7.67/L',text2:'油站价￥8.17/L',
					title2:'完蛋返加油金',num3:'0.50',title3:'/升'}
				]
			}
		},
		onload(){
			
		},
		onReady() {
		  //这里的 750 对应 css .charts 的 width
		  this.cWidth = uni.upx2px(750);
		  //这里的 500 对应 css .charts 的 height
		  this.cHeight = uni.upx2px(350);
		  this.getServerData();
		},
		methods:{
			change:function(){
				console.log(11)
				this.currentId=!this.currentId
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
					}
				});
			},	
			jumpDetail:function(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},

		getServerData() {
		    //模拟从服务器获取数据时的延时
		    setTimeout(() => {
		      //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
		      let res = {
		          categories: ["8月10日","8月24日","9月7日","9月22日","10月11日"],
		          series: [
		            {
		              name: "92#",
		              data: [8.5,8.3,8.5,8.1,8.1]
		            },
		            {
		              name: "95#",
		              data: [8.5,8.3,8.5,8.1,8.1]
		            },
		            {
		              name: "0#",
		              data: [8.5,8.3,8.5,8.1,8.1]
		            }
		          ]
		        };
		      this.drawCharts('OTHBVZYLEcSXooykxlygIIPergTSBAlm', res);
		    }, 500);
		  },
		  drawCharts(id,data){
		    const ctx = uni.createCanvasContext(id, this);
		    uChartsInstance[id] = new uCharts({
		      type: "area",
		      context: ctx,
		      width: this.cWidth,
		      height: this.cHeight,
		      categories: data.categories,
		      series: data.series,
		      animation: true,
		      timing: "easeOut",
		      duration: 1000,
		      rotate: false,
		      rotateLock: false,
		      background: "#FFFFFF",
		      color: ["#f00"],
		      padding: [15,15,0,15],
		      fontSize: 13,
		      fontColor: "#666666",
		      dataLabel: true,
		      dataPointShape: true,
		      dataPointShapeType: "solid",
		      touchMoveLimit: 60,
		      enableScroll: false,
		      enableMarkLine: false,
		      legend: {
		        show: true,
		        position: "bottom",
		        float: "center",
		        padding: 5,
		        margin: 5,
		        backgroundColor: "rgba(0,0,0,0)",
		        borderColor: "rgba(0,0,0,0)",
		        borderWidth: 0,
		        fontSize: 13,
		        fontColor: "#666666",
		        lineHeight: 11,
		        hiddenColor: "#CECECE",
		        itemGap: 10
		      },
		      xAxis: {
					
		      
		        disabled: false,
		        axisLine: false,
		        axisLineColor: "#CCCCCC",
		        calibration: false,
		        fontColor: "#666666",
		        fontSize: 13,
		        rotateLabel: false,
		        rotateAngle: 45,
		        itemCount: 2,
		        boundaryGap: "center",
		        splitNumber: 2,
		        gridColor: "#fff",
		        gridType: "solid",
		        dashLength: 4,
		        gridEval: 1,
		        scrollShow: false,
		        scrollAlign: "left",
		        scrollColor: "#A6A6A6",
		        scrollBackgroundColor: "#EFEBEF",
		        formatter: "",
				 
		      },
		      yAxis: {
					min: 7,
					max: 9,
		        gridType: "dash",
		        dashLength: 2,
		       
		        disableGrid: true,
		        splitNumber: 2,
		       
		        padding: 10,
		        showTitle: false,
		        data: []
		      },
		      extra: {
		        area: {
		          type: "curve",
		          opacity: 0.2,
		          addLine: true,
		          width: 2,
		          gradient:true,
					
		        },
		        tooltip: {
					  disableGrid:true,
		          showBox: true,
		          showArrow: true,
		          showCategory: false,
		          borderWidth: 0,
		          borderRadius: 0,
		          borderColor: "#000000",
		          borderOpacity: 0.7,
		          bgColor: "#000000",
		          bgOpacity: 0.7,
		          gridType: "solid",
		          dashLength: 4,
		          gridColor: "#CCCCCC",
		          fontColor: "#FFFFFF",
		          splitLine: true,
		          horizentalLine: false,
		          xAxisLabel: false,
		          yAxisLabel: false,
		          labelBgColor: "#FFFFFF",
		          labelBgOpacity: 0.7,
		          labelFontColor: "#666666"
		        },
		        markLine: {
		          type: "solid",
		          dashLength: 4,
		          data: []
		        }
		      }
		    });
		  },
		  tap(e){
		    uChartsInstance[e.target.id].touchLegend(e);
		    uChartsInstance[e.target.id].showToolTip(e);
		  }
		}
		
	}
</script>

<style lang="scss">
	.content{overflow: auto;background-color: #f3f4f6;}
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	 .charts{
	   // width: 750rpx;
	   height: 350rpx;z-index: 1;
	 }
	.flex{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;align-items: center;}
	//油价头部
	 .yj{position: relative;}
	.yj_top{margin: 0 auto;padding: 60rpx 40rpx 30rpx;height: 400rpx;box-sizing: border-box;background-color: #f00;}
	.yj_top h1{margin: 40rpx 0rpx;line-height: 40rpx;color: #fff;font-size: 40rpx;}
	.yj_top p{font-size: 26rpx;color: #ffa7a8;}
	.yj_content{width: 95%;margin: 0 auto;background-color: #fff;padding: 20rpx ;box-sizing: border-box;border-radius: 10rpx;position: absolute;left:20rpx;bottom: -230rpx;}
	.yj_text{font-size: 26rpx;}
	// .yj_c_top{margin: 20rpx 0rpx;}
	.yj_c_top p{color: #f00;}
	.yj_c_li{line-height: 80rpx;height: 80rpx;}
	.yj_contents_nav{margin-top: 20rpx  ;}
	.yj_c_li_left ,.yj_c_li_right{width:45%;}
	
	b{font-weight: 700;display: inline-block;}
	text{color: lightgray;font-size: 25rpx;display: inline-block;}
	//底部
	.yj_bottom{width:95%;margin: 300rpx auto 20rpx;}
	.yj_b_top{height: 60rpx;line-height: 60rpx;}
	.yj_b_top h1{font-weight: bold;font-size: 40rpx;}
	.yj_bottoms{margin: 40rpx 0rpx 40rpx;}
	.bottoms li{padding: 6rpx 0rpx 20rpx 20rpx;background-color: #fff;border-radius: 20rpx;height: 240rpx;box-sizing: border-box;margin-bottom: 20rpx;}
	.bottoms_left{width:25%;}
	.bottoms_left image {display: block;width:150rpx;height: 150rpx;}
	.bottoms_right{width:70%;position: relative;}
	.bottoms_right h1{font-size: 35rpx;line-height: 50rpx;margin: 10rpx 0rpx;}
	.bottoms_right p{font-size: 27rpx;margin: 10rpx 0rpx;color: #5e5e60;}
	.bottoms_right_one text{color: #f00;font-size: 27rpx;}
	.bottoms_right_one span{text-decoration: line-through;font-size: 25rpx;color: #999798;}
	.bottoms_right_two{width:250rpx;height: 40rpx;background-color: #fce78a;line-height: 40rxp;font-size: 25rpx;color: #7e4b00;text-align: center;}
	.bottoms_right_two text{color: #f00;font-weight: bold;}
	.bottoms_right .ding{position: absolute;right:0rpx;top:-25rpx;width:150rpx;height: 50rpx;border-radius: 20rpx;background-color: #f00;text-align: center;font-size: 25rpx;}
	//定位下方
	.yj_fixed{line-height: 70rpx;text-align: center;margin: 20rpx auto 0rpx;position: fixed;bottom: 0rpx;background-color: #f4f5f7;width: 100%;padding: 10rpx  30rpx;box-sizing: border-box;}
	.yj_fixed_left{width:34%;border-radius: 30rpx;background-color: #fff;color: #000;}
	.yj_fixed_right{width:55%;border-radius: 30rpx;background-color: #f00;color: #fff;}
</style>